/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { PureComponent } from "react";
import { Modal, Spin, Steps, Icon } from "antd";
import { connect } from "dva";
import { isArray } from "@/utils/isSomeType";
import { dateCalendar } from "@/utils/utils";
import styles from "./styles.less";

const { Step } = Steps;

@connect(({ express, loading }) => ({
  expressInfo: express.expressInfo,
  orderExpressInfo: express.orderExpressInfo,
  paymentLoading: loading.effects["express/getOrderPaymentExpressInfo"],
  recordLoading: loading.effects["express/getOrderExpressInfo"],
  scanRecordLoading: loading.effects["express/getGpExpressInfo"],
}))
class ExpressInfo extends PureComponent {
  state = {
    typeMapToEffects: {
      orderRecord: "express/getOrderExpressInfo",
      orderStatistics: "express/getOrderPaymentExpressInfo",
      scanRecord: "express/getGpExpressInfo",
    },
  };

  componentDidMount() {
    this.getExpressInfo();
  }

  getExpressInfo = () => {
    const { dispatch, data, type } = this.props;
    const { typeMapToEffects } = this.state;
    let payload = {}
    if (type == "scanRecord") {
      payload.brand_name = data.brand
      payload.waybill_no = data.waybill_no
      payload.create_time = data.create_time
      payload.cm_phone = data.cm_phone
      payload.branch_id = data.branch_id
    }else{
      payload = data
    }

    dispatch({
      type: typeMapToEffects[type],
      payload,
    });
  };

  progressDot = (iconDot, { status }) => {
    return <Icon type={status === "success" ? "check-circle" : "down-circle"} />;
  };

  expressFormat = () => {
    const { orderExpressInfo, paymentLoading, recordLoading, scanRecordLoading } = this.props;
    const loading = paymentLoading || recordLoading || scanRecordLoading;
    if (
      !orderExpressInfo ||
      !(isArray(orderExpressInfo.data) && orderExpressInfo.data.length !== 0) ||
      loading
    )
      return (
        <span style={{ color: "#999" }}>{loading ? "物流信息读取中..." : "暂无物流信息"}</span>
      );
    return (
      <Steps direction="vertical" progressDot={this.progressDot} labelPlacement="vertical">
        {orderExpressInfo.data.map((item, index) => {
          const { time, context, status } = item;
          return (
            <Step
              status={status == "signed" ? "success" : "wait"}
              key={index}
              title={dateCalendar(`${time}`)}
              description={context}
            />
          );
        })}
      </Steps>
    );
  };

  render() {
    const { loading } = this.props;
    return (
      <Spin spinning={loading === true}>
        <div className={styles.infoList}>{this.expressFormat()}</div>
      </Spin>
    );
  }
}

class ExpressInfoModal extends PureComponent {
  state = {
    visible: false,
  };

  static getDerivedStateFromProps(props) {
    return {
      visible: !!props.data,
    };
  }

  handleCancel = () => {
    this.props.cleanData();
  };

  modalTitle = () => {
    const { waybill_no, brand_name } = this.props.data;
    return `物流详情： ${waybill_no} ${brand_name}`;
  };

  render() {
    const { visible } = this.state;
    const { data, type } = this.props;
    if (!data) return null;
    const { id, waybill_no, brand_name, brand, create_time, cm_phone, branch_id } = data;
    return (
      <Modal
        onCancel={this.handleCancel}
        title={this.modalTitle()}
        centered
        visible={visible}
        width={800}
        footer={false}
        destroyOnClose
      >
        <ExpressInfo
          data={{
            id,
            waybill_no,
            brand_name,
            brand,
            create_time,
            cm_phone,
            branch_id,
          }}
          type={type}
        />
      </Modal>
    );
  }
}

export { ExpressInfoModal as default, ExpressInfo };
